import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.14

Item {

    id: root

    readonly property real dp: config.dp

    property string deviceId: ""
    property string name: ""
    property string route: ""
    property int status: 0
    property bool isChecked: false
    property bool isHover: false

    signal released()

    height: 137 *dp
    width: 170 *dp



    Rectangle{      // 阴影效果
        anchors.fill: parent
        layer.enabled: true
        radius: 10*dp
        opacity: 0.1
        layer.effect: DropShadow{
            color: "#172DD6"
            samples: 32
            radius: 10*dp
            spread: 0.1
        }
    }Rectangle{
        anchors.fill: parent
        color: (isChecked||isHover) ? "#F2F9FF" : "white"
        border.color: (isChecked) ? "#1677FF" : "#EFEFEF"
        radius: 10 *dp
    }

    MouseArea{
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onEntered: {
            isHover = true
        }onExited: {
            isHover = false
        }onReleased: {
            root.released()
        }
    }

    Image{
        x: 16 *dp
        y: 16 *dp
        height: 20 *dp
        width: 20 *dp
        source: "qrc:/picture/device_item.png"
    }
    Text{
        id: text_equName
        text: name
        font.bold: true
        font.pixelSize: config.fontsize+1
        x: 16*dp; y: 49*dp
        height: 30*dp;  width: root.width - 30*dp
        elide: Text.ElideRight
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onEntered: {
                isHover = true
                if(text_equName_2.contentWidth > text_equName.width){
                    tooltip_name.visible = true
                }
            }onExited: {
                isHover = false
                tooltip_name.visible = false
            }onReleased: {
                root.released()
            }
        }Text{  // 用于判断文本是否超出显示范围 (嗯，是ChatGPT教我这么干的……)
            id: text_equName_2
            visible: false
            anchors.fill: text_equName
            text: name
            font.bold: true
            font.pixelSize: config.fontsize+1
        }ToolTip{
            id: tooltip_name
            visible: false
            x: parent.width + 5*dp;   y: -5
            delay: 600
            background: Rectangle{
                color: "#222222"
                radius: 5
            }
            contentItem: Text{
                text: name
                color: "white"
                font.pixelSize: config.fontsize
            }

            opacity: 0.85
        }
    }
    Text{
        text: route
        font.pixelSize: config.fontsize-1
        color: "#999999"
        x: 16*dp
        y: 75*dp
    }
    Rectangle{
        x: 16*dp
        y: 100*dp
        height: 24*dp
        width: 60*dp
        color: {        // 文字背景颜色

            if(status === 1){
                return "#E9EAF7"
            }else if(status === 0){
                return "#FBEAEA"
            }else if(status === 2){
                return "#F0F9EB"
            }else if(status === 3){
                if(gPageModel === 0){
                    return "#FDF6EC"
                }else{
                    return "#E9EAF7"
                }
            }else if(status === 4){
                return "#FDF6EC"
            }else{
                return "#E9EAF7"
            }
        }
        Text{
            anchors.centerIn: parent
            text: {
                if(status === 1){
                    return "在线"
                }else if(status === 0){
                    return "未连接"
                }else if(status === 2){
                    return "运行中"
                }else if(status === 3){
                    if(gPageModel === 0){
                        return "已完成"
                    }else{
                        return "在线"
                    }

                }else if(status === 4){
                    return "故障"
                }else{
                    return "未知"
                }
            }
            font.bold: true
            font.pixelSize: config.fontsize-1
            color: {        // 文字颜色
                if(status === 1){
                    return "#1677FF"
                }else if(status === 0){
                    return "#F56C6C"
                }else if(status === 2){
                    return "#67C23A"
                }else if(status === 3){
                    if(gPageModel === 0){
                        return "#EBA23C"
                    }else{
                        return "#1677FF"
                    }
                }else{
                    return "#F56C6C"
                }
            }
        }
    }

}
